﻿<h1>GridView Sorting Example</h1>
This example explains how to create a window with a sortable GridView control, bind to the data and show on the screen. <br><br>In the real life scenario sorting is expected to be performed on the server based on the sorting info passed from the client. Efficiency of the sorting depends on how the data is stored, so you should be prudent when selecting which columns should be sortable.<br>
<button id="GridViewSortingExample" class="try-example-button">Try Example</button>
<h2>UI Model</h2>
<div style="color:Black;background-color:White;"><pre>{
    <span style="color:#A31515;">"windows"</span>: [
        {
            <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"GridViewSortingExample"</span>,
            <span style="color:#A31515;">"title"</span>: <span style="color:#A31515;">"GridView Column Sorting Example"</span>,
            <span style="color:#A31515;">"left"</span>: 500,
            <span style="color:#A31515;">"top"</span>: 100,
            <span style="color:#A31515;">"width"</span>: 500,
            <span style="color:#A31515;">"height"</span>: 500,
            <span style="color:#A31515;">"controls"</span>: [
                {
                    <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"managersGrid"</span>,
                    <span style="color:#A31515;">"type"</span>: <span style="color:#A31515;">"gridview"</span>,
                    <span style="color:#A31515;">"bindsTo"</span>: <span style="color:#A31515;">"list"</span>,
                    <span style="color:#A31515;">"canUserAddRows"</span>: <span style="color:Blue;">false</span>,
                    <span style="color:#A31515;">"columns"</span>: [
                        {
                            <span style="color:#A31515;">"type"</span>: <span style="color:#A31515;">"gridviewstatictextcolumn"</span>,
                            <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"title"</span>,
                            <span style="color:#A31515;">"label"</span>: <span style="color:#A31515;">"Title"</span>,
                            <span style="color:#A31515;">"width"</span>: 170,
                            <span style="color:#A31515;">"bindsTo"</span>: <span style="color:#A31515;">"title"</span>,
                            <b><span style="color:#A31515;">"isSortable"</span>: <span style="color:Blue;">true</span></b>
                        },
                        {
                            <span style="color:#A31515;">"type"</span>: <span style="color:#A31515;">"gridviewstatictextcolumn"</span>,
                            <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"name"</span>,
                            <span style="color:#A31515;">"label"</span>: <span style="color:#A31515;">"Name"</span>,
                            <span style="color:#A31515;">"width"</span>: 280,
                            <span style="color:#A31515;">"bindsTo"</span>: <span style="color:#A31515;">"name"</span>,
                            <b><span style="color:#A31515;">"isSortable"</span>: <span style="color:Blue;">true</span></b>
                        }
                    ]
                },
                {
                    <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"OKButton"</span>,
                    <span style="color:#A31515;">"type"</span>: <span style="color:#A31515;">"button"</span>,
                    <span style="color:#A31515;">"text"</span>: <span style="color:#A31515;">"OK"</span>,
                    <span style="color:#A31515;">"isDialogButton"</span>: <span style="color:Blue;">true</span>,
                    <span style="color:#A31515;">"dialogResult"</span>: <span style="color:#A31515;">"OK"</span>
                },
                {
                    <span style="color:#A31515;">"name"</span>: <span style="color:#A31515;">"CancelButton"</span>,
                    <span style="color:#A31515;">"type"</span>: <span style="color:#A31515;">"button"</span>,
                    <span style="color:#A31515;">"text"</span>: <span style="color:#A31515;">"Cancel"</span>,
                    <span style="color:#A31515;">"isDialogButton"</span>: <span style="color:Blue;">true</span>,
                    <span style="color:#A31515;">"dialogResult"</span>: <span style="color:#A31515;">"Cancel"</span>
                }
            ]
        }
    ]
}
</pre></div>
<h2>Data Model</h2>
<div style="color:Black;background-color:White;"><pre><span style="color:Green;">// Function that returns data sorted.</span>
<span style="color:Green;">// In the real life this function would perform an ajax request to the server</span>
<span style="color:Green;">// That would return data sorted as requested</span>
<span style="color:Blue;">function</span> getSortedData(sortingInfo) {
	<span style="color:Blue;">var</span> teamManagement = {
		list: [
			{
				id: 7,
				title: <span style="color:#A31515;">"Manager"</span>,
				name: <span style="color:#A31515;">"Fiorello Lombardi"</span>,
			},
			{
				id: 8,
				title: <span style="color:#A31515;">"Goalkeeping Coach"</span>,
				name: <span style="color:#A31515;">"Armando Arcuri"</span>,
			},
			{
				id: 9,
				title: <span style="color:#A31515;">"Assistant Manager"</span>,
				name: <span style="color:#A31515;">"Alessio Ferri"</span>,
			},
			{
				id: 10,
				title: <span style="color:#A31515;">"First-team Coach"</span>,
				name: <span style="color:#A31515;">"Giuseppe Milani"</span>,
			},
			{
				id: 17,
				title: <span style="color:#A31515;">"Manager"</span>,
				name: <span style="color:#A31515;">"Armando Arcuri"</span>,
			},
			{
				id: 18,
				title: <span style="color:#A31515;">"Goalkeeping Coach"</span>,
				name: <span style="color:#A31515;">"Alessio Ferri"</span>,
			},
			{
				id: 19,
				title: <span style="color:#A31515;">"Assistant Manager"</span>,
				name: <span style="color:#A31515;">"Giuseppe Milani"</span>,
			},
			{
				id: 20,
				title: <span style="color:#A31515;">"First-team Coach"</span>,
				name: <span style="color:#A31515;">"Fiorello Lombardi"</span>,
			}
		]
	};

	<span style="color:Blue;">if</span> (!sortingInfo) {
		<span style="color:Blue;">return</span> teamManagement;
	}
	
	<span style="color:Blue;">var</span> columns = sortingInfo.sortingColumns;
	<span style="color:Blue;">var</span> len = columns.length;

        <span style="color:Green;">// In a real-life scenario sorting will be performed on the server</span>
	teamManagement.list.sort(<span style="color:Blue;">function</span> (a, b) {
		<span style="color:Blue;">for</span> (<span style="color:Blue;">var</span> i = 0; i &lt; len; i++) {
			<span style="color:Blue;">var</span> valueA = a[columns[i].columnName];
			<span style="color:Blue;">var</span> valueB = b[columns[i].columnName];

			<span style="color:Blue;">if</span> (valueA === valueB) {
				<span style="color:Blue;">continue</span>;
			}

			<span style="color:Blue;">if</span> (columns[i].isAscending) {
				<span style="color:Blue;">return</span> valueA &gt; valueB;
			} <span style="color:Blue;">else</span> {
				<span style="color:Blue;">return</span> valueA &lt; valueB;
			}
		}
	});

	<span style="color:Blue;">return</span> teamManagement;
}
</pre></div>
<h2>Code</h2>
<div style="color:Black;background-color:White;"><pre><span style="color:Blue;">var</span> exampleWindow = redui.createNewWindow(<span style="color:#A31515;">"GridViewSortingExample"</span>);
<span style="color:Blue;">var</span> sortedData = getSortedData();
exampleWindow.bind(sortedData);
exampleWindow.show();

exampleWindow.managersGrid.sortingChanged(<span style="color:Blue;">function</span> (target, sortingInfo) {
	<span style="color:Blue;">var</span> sortedData = getSortedData(sortingInfo);
	exampleWindow.bind(sortedData);
});
</pre></div>